/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-23 16:46:50
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-23 18:21:04
 * @FilePath: /umi/src/layouts/components/AppConfig/Setting.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AESettingPage
 */
import React, { useState, useEffect } from "react";
import { connect, useDispatch, history } from "umi";
import { Switch, Row, Col, ColorPicker, Button, Tooltip } from "antd";
import "./index.less";
const SettingPage = (props) => {
  const { drawerShow, closeDrawer, dispatch, appConfig } = props;
  const [colorHex, setColorHex] = useState("#1677ff");

  // 获取路由
  const getRouter = () => {
    dispatch({
      type: "appConfig/setMenuList",
      payload: "1",
    });
  };

  useEffect(() => {
    getRouter();
  }, []);
  return (
    <div className="settingBox">
      <Row className="rowClass">
        <Col span={12}>主题色</Col>
        <Col span={6}>
          <ColorPicker
            value={appConfig.colorPrimary}
            onChange={(val) => {
              setColorHex("#" + val.toHex());

              dispatch({
                type: "appConfig/setColorPrimary",
                payload: "#" + val.toHex(),
              });
            }}
          />
        </Col>
      </Row>
      <Row className="rowClass">
        <Col span={12}>侧边栏颜色</Col>
      </Row>

      <Row className="rowClass">
        <Col span={6}>
          <div
            className={`dark ${appConfig.siderMenuTheme == "dark" ? "av" : ""}`}
            value={appConfig.siderMenuTheme == "dark"}
            onClick={(val) => {
              dispatch({
                type: "appConfig/setSiderMenuTheme",
                payload: "dark",
              });
            }}
          ></div>
        </Col>
        <Col span={12}>
          <div
            className={`light ${appConfig.siderMenuTheme == "light" ? "av" : ""}`}
            value={appConfig.siderMenuTheme == "light"}
            onClick={(val) => {
              dispatch({
                type: "appConfig/setSiderMenuTheme",
                payload: "light",
              });
            }}
          ></div>
        </Col>
      </Row>
      <Row className="rowClass">
        <Col span={12}>导航设置</Col>
      </Row>
      <Row className="rowClass">
        <Col span={6}>
          <Tooltip placement="top" title="侧边导航">
            <div
              className={`a ${appConfig.menuType == "2" ? "av" : ""}`}
              onClick={(val) => {
                dispatch({
                  type: "appConfig/setNavigation",
                  payload: "2",
                });
                dispatch({
                  type: "appConfig/getMenuList",
                  payload: "2",
                });
              }}
            ></div>
          </Tooltip>
        </Col>
        <Col span={6}>
          <Tooltip placement="top" title="混合导航">
            <div
              className={`b ${appConfig.menuType == "1" ? "av" : ""}`}
              onClick={(val) => {
                dispatch({
                  type: "appConfig/setNavigation",
                  payload: "1",
                });
                dispatch({
                  type: "appConfig/getMenuList",
                  payload: "1",
                });
              }}
            ></div>
          </Tooltip>
        </Col>
        <Col span={6}>
          <Tooltip placement="top" title="顶部导航">
            <div
              className={`c ${appConfig.menuType == "3" ? "av" : ""}`}
              onClick={(val) => {
                dispatch({
                  type: "appConfig/setNavigation",
                  payload: "3",
                });
                dispatch({
                  type: "appConfig/getMenuList",
                  payload: "3",
                });
              }}
            ></div>
          </Tooltip>
        </Col>
      </Row>
      <Row className="rowClass">
        <Col span={12}>水印</Col>
        <Col span={12}>
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            defaultChecked
            value={appConfig.watermark == "1"}
            onChange={(val) => {
              dispatch({
                type: "appConfig/setWatermark",
                payload: val ? "1" : "2",
              });
            }}
          />
        </Col>
      </Row>
      <Row className="btnClass">
        <Col span={10}>
          <Button>取消</Button>
        </Col>
        <Col span={10}>
          <Button
            style={{ widows: "200px" }}
            type="primary"
            onClick={() => {
              dispatch({
                type: "appConfig/sunitConfig",
              });
            }}
          >
            保存配置
          </Button>
        </Col>
      </Row>
    </div>
  );
};
export default connect((state) => ({ appConfig: state.appConfig }))(SettingPage);
